<template>
  <div class="switch">
    <h1>Switch 组件示例</h1>
    <p>Switching 选择器。</p>
    <h2>什么时候去使用</h2>
    <p>如果需要表示两种状态或开关状态之间的切换，你可以使用该组件。</p>
    <Demo :component="Switch1Demo" />
    <Demo :component="Switch2Demo" />
  </div>
</template>

<script lang='ts'>
import Demo from "../../components/Demo.vue";
import Switch1Demo from "../../components/Switch1.demo.vue";
import Switch2Demo from "../../components/Switch2.demo.vue";
import "prismjs";
import "prismjs/themes/prism-okaidia.css";
const Prism = (window as any).Prism;

export default {
  components: {
    Demo,
  },
  setup() {
    return {
      Switch1Demo,
      Switch2Demo,
      Prism,
    };
  },
};
</script>
<style  lang='scss' >
.switch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  > h1 {
    margin-bottom: 16px;
  }
  > p {
    margin-bottom: 16px;
  }
}
</style>
